<template>
  <div class="app-container">
    <!-- 筛选工具栏 -->
    <div class="control-bar">
      <div class="left">
        <el-input
          v-model="searchInput"
          placeholder="搜索订单号/桌号"
          clearable
          style="width: 300px"
          @keyup.enter="filterRefunds"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select
          v-model="filterStatus"
          placeholder="全部状态"
          clearable
          style="width: 150px; margin-left: 10px"
        >
          <el-option label="待处理" value="0" />
          <el-option label="已通过" value="1" />
          <el-option label="已拒绝" value="2" />
        </el-select>
        <el-button type="primary" @click="filterRefunds">搜索</el-button>
      </div>
    </div>

    <!-- 退款记录表格 -->
    <el-table
      :data="filteredRefunds"
      border
      stripe
      style="width: 100%; height: calc(100vh - 180px)"
    >
      <el-table-column prop="refundNo" label="退款单号" min-width="220" align="center" />
      <el-table-column prop="orderNo" label="原订单号" min-width="200" align="center" />
      <el-table-column prop="table" label="桌号" min-width="120" align="center" />
      <el-table-column label="退款金额" min-width="140" align="center">
        <template #default="{row}">
          <span class="price">¥{{ row.amount.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" min-width="120" align="center">
        <template #default="{row}">
          <el-tag :type="paymentMethodStyle[row.payMethod].type">
            {{ paymentMethodStyle[row.payMethod].text }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="退款状态" min-width="120" align="center">
        <template #default="{row}">
          <el-tag :type="refundStatusStyle[row.status].type" effect="light">
            {{ refundStatusStyle[row.status].text }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" min-width="180" align="center">
        <template #default="{row}">{{ formatTime(row.applyTime) }}</template>
      </el-table-column>
      <el-table-column label="操作" min-width="240" align="center" fixed="right">
        <template #default="{row}">
          <el-button
            size="small"
            @click="showDetailDialog(row)"
          >详情</el-button>
          <el-button
            v-if="row.status === 0"
            type="primary"
            size="small"
            @click="showProcessDialog(row)"
          >处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 退款详情对话框 -->
    <el-dialog
      v-model="showDetail"
      title="退款申请详情"
      width="600px"
    >
      <div v-if="currentRefund" class="refund-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="退款单号">{{ currentRefund.refundNo }}</el-descriptions-item>
          <el-descriptions-item label="原订单号">{{ currentRefund.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="桌号">{{ currentRefund.table }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">
            <el-tag :type="paymentMethodStyle[currentRefund.payMethod].type">
              {{ paymentMethodStyle[currentRefund.payMethod].text }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="原支付金额">
            ¥{{ currentRefund.originalAmount.toFixed(2) }}
          </el-descriptions-item>
          <el-descriptions-item label="申请金额">
            ¥{{ currentRefund.amount.toFixed(2) }}
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ formatFullTime(currentRefund.applyTime) }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentRefund.applicant }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="退款原因">
            <div class="reason-box">{{ currentRefund.reason }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 处理退款对话框 -->
    <el-dialog
      v-model="showProcess"
      title="处理退款申请"
      width="500px"
    >
      <el-form :model="processForm" label-width="80px">
        <el-form-item label="处理结果" required>
          <el-radio-group v-model="processForm.result">
            <el-radio label="1">同意退款</el-radio>
            <el-radio label="2">拒绝退款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理备注">
          <el-input
            v-model="processForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入处理意见或备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showProcess = false">取消</el-button>
        <el-button type="primary" @click="submitProcess">提交处理</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

// 状态样式配置
const refundStatusStyle = {
  0: { text: '待处理', type: 'warning' },
  1: { text: '已通过', type: 'success' },
  2: { text: '已拒绝', type: 'danger' }
}

const paymentMethodStyle = {
  cash: { text: '现金', type: '' },
  alipay: { text: '支付宝', type: 'primary' },
  wechat: { text: '微信', type: 'success' }
}

// 模拟退款数据
const refunds = ref([
  {
    refundNo: 'REF20231122001',
    orderNo: 'ORD20231122001',
    table: 'A03',
    payMethod: 'alipay',
    originalAmount: 598.0,
    amount: 598.0,
    status: 0,
    applyTime: '2023-11-22 19:30:45',
    applicant: '王客户',
    reason: '菜品上错，要求全额退款'
  },
  {
    refundNo: 'REF20231122002',
    orderNo: 'ORD20231122002',
    table: 'B05',
    payMethod: 'wechat',
    originalAmount: 328.5,
    amount: 150.0,
    status: 1,
    applyTime: '2023-11-22 18:45:30',
    applicant: '李客户',
    reason: '部分菜品未上齐'
  }
])

// 响应式数据
const searchInput = ref('')
const filterStatus = ref('')
const showDetail = ref(false)
const showProcess = ref(false)
const currentRefund = ref(null)
const processForm = reactive({
  result: '1',
  remark: ''
})

// 计算属性
const filteredRefunds = computed(() => {
  return refunds.value.filter(refund => {
    const matchSearch = refund.refundNo.includes(searchInput.value) ||
                      refund.table.toLowerCase().includes(searchInput.value.toLowerCase())
    const matchStatus = filterStatus.value !== ''
                      ? refund.status === parseInt(filterStatus.value)
                      : true
    return matchSearch && matchStatus
  })
})

// 方法
const formatTime = (timeStr) => {
  return dayjs(timeStr).format('HH:mm')
}

const formatFullTime = (timeStr) => {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss')
}

const showDetailDialog = (refund) => {
  currentRefund.value = refund
  showDetail.value = true
}

const showProcessDialog = (refund) => {
  currentRefund.value = refund
  processForm.result = '1'
  processForm.remark = ''
  showProcess.value = true
}

const submitProcess = () => {
  if (!currentRefund.value) return

  // 更新状态
  const statusMap = {
    '1': 1,
    '2': 2
  }
  currentRefund.value.status = statusMap[processForm.result]

  ElMessage.success('处理完成')
  showProcess.value = false
}

const filterRefunds = () => {
  // 过滤逻辑已在计算属性中实现
}
</script>

<style scoped>
.refund-detail {
  padding: 10px;

  :deep(.el-descriptions) {
    margin: 10px 0;

    .el-descriptions-item__label {
      width: 100px;
      background: #f8f9fa;
    }
  }

  .reason-box {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    line-height: 1.6;
  }
}

.price {
  color: #f56c6c;
  font-weight: 600;
}

:deep(.el-table) {
  .el-tag {
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
  }

  .cell {
    padding: 0 8px;
  }
}
</style>